<template>
  <div>
    <!--条件查询-->
    <div class="toolbar">
      <span> 供应商名称:</span>
      <el-input v-model="filter.name" class="search_ipt" clearable placeholder="请输入供应商名称" size="mini">
      </el-input>

      <span>联系人:</span>
      <el-input v-model="filter.contact" class="search_ipt" clearable placeholder="请输入联系人" size="mini">
      </el-input>

      <span>手机号:</span>
      <el-input v-model="filter.mobile" class="search_ipt" clearable placeholder="请输入手机号" size="mini">
      </el-input>

      <el-button size="mini" style="margin-left: 10px;" type="primary" @click="query()">查询</el-button>
      <el-button size="mini" style="margin-left: 10px;" type="info" @click="reset()">重置</el-button>
    </div>
    <!--工具条-->
    <div style="height: 40px;line-height: 40px;margin-bottom: 10px;">
      <el-button size="mini" style="margin-left: 10px;" type="primary" @click="saveOrUpdate()">新增</el-button>

      <el-dropdown size="mini" split-button style="margin-left: 20px;" type="primary" @command="batch">
        批量操作
        <el-dropdown-menu>
          <el-dropdown-item command="del">删除</el-dropdown-item>
          <el-dropdown-item command="disable">禁用</el-dropdown-item>
          <el-dropdown-item command="enable">启用</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </div>


    <!--数据列表-->
    <el-table :border="true" :data="tableData" stripe style="width: 100%" @selection-change="selectchg">
      <el-table-column type="expand">
        <template v-slot="props">
          <el-form class="demo-table-expand" inline label-position="left">
            <el-form-item label="供应商编码">
              {{ props.row.code }}
            </el-form-item>
            <el-form-item label="供应商名称" prop="name">
              {{ props.row.name }}
            </el-form-item>
            <el-form-item label="供应商类别">
              {{ props.row.categoryCode }}
            </el-form-item>
            <el-form-item label="供应商等级">
              {{ props.row.level }}
            </el-form-item>

            <el-form-item label="所属行业">
              {{ props.row.industry }}
            </el-form-item>

            <el-form-item label="联系人" prop="contact">
              {{ props.row.contact }}
            </el-form-item>
            <el-form-item label="联系电话" prop="tel">
              {{ props.row.tel }}
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              {{ props.row.mobile }}
            </el-form-item>
            <el-form-item label="email">
              {{ props.row.email }}
            </el-form-item>
            <el-form-item label="法人">
              {{ props.row.boss }}
            </el-form-item>
            <el-form-item label="注册资本(万元)">
              {{ props.row.registeredCapital }}
            </el-form-item>
            <el-form-item label="员工规模(人)">
              {{ props.row.staffsize }}
            </el-form-item>
            <el-form-item label="公司简介" style="width: 100%;height: 100%;">
              {{ props.row.content }}
            </el-form-item>

            <el-form-item label="开户银行">
              {{ props.row.bank }}
            </el-form-item>
            <el-form-item label="账户名称">
              {{ props.row.bankname }}
            </el-form-item>
            <el-form-item label="银行账号">
              {{ props.row.bankAccount }}
            </el-form-item>
            <el-form-item label="纳税人识别号">
              {{ props.row.taxpayerId }}
            </el-form-item>

          </el-form>
        </template>
      </el-table-column>

      <el-table-column align="center" header-align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column align="center" header-align="center" label="序号" type="index" width="80">
      </el-table-column>
      <el-table-column header-align="center" label="名称" prop="name">
      </el-table-column>
      <el-table-column header-align="center" label="供应商类别" prop="categoryName" width="220">
      </el-table-column>
      <el-table-column header-align="center" label="供应商等级" prop="level" width="150">
      </el-table-column>
      <el-table-column header-align="center" label="联系人" prop="contact" width="150">
      </el-table-column>
      <el-table-column header-align="center" label="联系电话" prop="tel" width="150">
      </el-table-column>
      <el-table-column header-align="center" label="手机号" prop="mobile" width="150">
      </el-table-column>
      <el-table-column align="center" header-align="center" label="所属行业" prop="industry" width="120">
      </el-table-column>
      <el-table-column align="center" header-align="center" label="操作" width="180">

        <template v-slot="scope">
          <el-button circle icon="el-icon-edit" size="mini" title="修改" type="primary" @click="saveOrUpdate(scope.row)">
          </el-button>
          <el-button circle icon="el-icon-delete" size="mini" title="删除" type="danger" @click="del(scope.row.id)">
          </el-button>
        </template>

      </el-table-column>
    </el-table>

    <!--分页-->
    <div style="text-align: right;margin-top: 20px;">
      <el-pagination :page-size="pageSize" :page-sizes="[10,20,30,40,50,100]" :total="total"
                     background layout="total,sizes,prev, pager, next" style="margin-right: 30px;"
                     @current-change="pageChange"
                     @size-change="sizeChange">
      </el-pagination>
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      sels: [], //代表选择多个
      filter: {
        name: "",
        contact: "",
        mobile: ""
      },
      isshow: false, //是否显示编辑框
      pageNum: 1, //默认显示第一页
      pageSize: 10, //每页显示的记录数
      total: 0, //总记录数
      user: {}, //登录用户信息
    }
  },
  created() {
    this.user = this.$session.getUser();
    this.initData();
  },

  methods: {


    //批量操作
    batch(command) {
      if (this.sels.length === 0) {
        this.$message({
          message: '请选择要批量操作的数据',
          type: 'warning'
        });
        return;
      }


      //判断命令是否是删除
      if (command === "del") {
        this.$confirm('您确认要批量删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.executeBatch(command);
        }).catch(() => {});
      } else {
        this.executeBatch(command);
      }


    },

    //执行批量操作
    executeBatch(command) {
      //获取要操作的数据id
      let ids = [];
      this.sels.forEach(user => {
        ids.push(user.id);
      })
      this.$api.batchUser({
        command,
        ids
      })
        .then(res => {
          if (res.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            //刷新数据
            this.initData();
          }
        })

    },

    //选择变化事件
    selectchg(sel) {
      this.sels = sel;
    },
    query() {
      this.pageNum = 1;
      this.initData();
    },
    reset() {
      this.filter = {
        account: "",
        name: "",
        mobile: ""
      };
      this.pageNum = 1;
      this.initData();
    },
    //新增或修改
    saveOrUpdate(data) {
      this.$router.push({
        name: "OptProvider",
        params: data
      })
    },
    //删除
    del(id) {
      this.$confirm('您确认要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deleteUser({
          id
        })
          .then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
            this.initData()
          })

      }).catch(() => {});
    },
    //当页数改变时
    pageChange(page) {
      this.pageNum = page;
      this.initData();
    },
    //当每页记录数改变时
    sizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1;
      this.initData();
    },
    //查询数据
    initData() {
      let params = {
        "pageNum": this.pageNum,
        "pageSize": this.pageSize,
        "name": this.filter.name,
        "contact": this.filter.contact,
        "mobile": this.filter.mobile
      };
      this.$api.queryProvider(params)
        .then(res => {
          //判断接口数据是否正常
          if (res.code === 200) {
            this.tableData = res.data.list;
            this.pageNum = res.data.pageNum;
            this.pageSize = res.data.pageSize;
            this.total = res.data.total;
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.search_ipt {
  width: 200px;
  margin-left: 5px;
}

.toolbar {
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
}

.toolbar span {
  margin-left: 20px;
}

.dept {
  border: #ddd solid 1px;
  margin: 0 2px;
  border-radius: 2px;
}
</style>
